<script setup lang="ts" name="Records">
import dayjs from "dayjs";
import API from "@/api";
import { nocache } from '@/store';

const { t } = useI18n();
const piniaNocache = nocache();
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  type: {
    type: Number,
    default: "",
  },
});

const data: any = reactive({
  recordList:[],
  pagination: {
    loading: false,
    pageNum: 1,
    pageSize: 10,
    total: 0
  }
});

const {
  recordList,pagination
} = toRefs(data);
const queryUserInvestDrawList = () => {
  pagination.value.loading = true;
  let params = {
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
    type:props.type
  }
  API.userInvestDrawListAPI(params).then((res:any) => {
      if (res?.code === 200) {
        recordList.value = [...recordList.value, ...res.rows]
        pagination.value.total = res?.total || 0;
      }
    }).finally(() => {
    pagination.value.loading = false;
  });;
}
queryUserInvestDrawList()
const statusFunc = (state:any) => {
  switch(state) {
    case 1:
    return t('recharge.state3')
    case 2:
    return t('recharge.state4')
    case 3:
    return t('recharge.state5')
  }
}
watch(() => piniaNocache.getHitBottom, () => {
  let totalPage = Math.ceil(pagination.value.total / pagination.value.pageSize);
  if(pagination.value.pageNum < totalPage){
    pagination.value.pageNum ++;
    queryUserInvestDrawList();
  }
});
</script>

<template>
  <DetailHeader :title="title" :isNeedBackIcon="true" />
  <div class="recordsPage">
    <div class="recordItem" v-for="(el, index) in recordList" :key="index">
      <div class="top">
        <div>{{ el.id }}</div>
        <div>{{ statusFunc(el.state) }}</div>
      </div>
      <div class="bottom">
        <div class="num">
          <div>{{ t('recharge.test7') }}</div>
          <div>₹ {{ el.money }}</div>
        </div>
        <div class="num time">
          <div>{{ t('recharge.test8') }}</div>
          <div>{{ dayjs(+el.createTime).format("DD-MM-YYYY hh:mm A") }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
